<script setup>
    // vue相关
    import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
    // 组件
    import navBack from '../components/navBack.vue' // 头部
    import TemplateVideo from '../components/TemplateVideo.vue' // 视频
    import TemplateBottomControls from '../components/TemplateBottomControls.vue' // 底部操作栏
    import UploadFileModal from "@/views/shotstack/MaterialCenter/modules/UploadFileModal.vue"; // 上传弹窗
    import TemplateBatchOperation from '../components/TemplateBatchOperation.vue' // 批量操作界面
    import { UploadOutlined } from '@ant-design/icons-vue';
    // 路由
    import { useRouter } from 'vue-router'
    const router = useRouter()
    // 工具引入
    import utils from '@/common/utils/utils.js'
    // 图标
    import {
    VideoCameraFilled
    } from '@ant-design/icons-vue';
    // 右侧添加素材按钮
    const radioGroupVal = ref('1')
    // 华东进度条和音量
    const sliderVal = ref(10)
    // 气泡弹窗
    const popVisible = ref(false)
    // 绑定文本
    const state = reactive({
        textone: '爱美生活馆',
        texttwo: '美丽管理中心',
        fileTxtChange:''
    })
    // 本地上传文件弹窗
    const visibleUploadFile = ref(false)
    // 上传文件弹窗提交事件
    const onSubmitUploadFile = () => {
			state.visibleUploadFile = false;
			// state.pageInfo.current = 1
			if (state.fileTxtChange == "text") {
				getTextList();
			} else {
				getMediaList();
			}
		};
        
        // 本地上传 - 选择单个文件直接上传
        const uplodFile = ()=>{
            if(radioGroupVal.value == '2'){
                // 本地上传
                const button = document.querySelector('.ant-upload .ant-btn');
                button.click()
            }

        }
        // 选择的文件列表
        const fileList = ref([]);

        /**
         * true 展示模板使用
         * false 展示批量操作
         */
        const isShowtemplate  = ref(true)
        // 切换批量操作 显示内容
        const batchOperation = ()=>{
            isShowtemplate.value = false
        }

    
   
</script>

<template>
    <div class="view_detail">
            <!--
                 模板使用
             -->
             <template  v-if="isShowtemplate">                
                 <div class="view_detail_use">    
                     <!-- 头部 -->
                     <navBack 
                     :left-config="{
                        isShow:true,
                        title:'模板使用'
                     }"
                     :right-config="{
                        isShow:true,
                        isShowEllipsis:true
                     }"
                     @backClick="router.push('/templateDetail')">
                         <template #right_btns>
                             <a-button 
                             class="view_detail_btn"
                             >
                                 <VideoCameraFilled />
                                 <span >
                                     查看原片
                                 </span>
                             </a-button>
                             <a-button class="view_detail_btn" >
                                 生成视频
                             </a-button>
                         </template>
             
                         <template #controls>
                             <div class="item_select" 
                                 @click="setSelections('subSelect',123)">
                                 {{ '保存草稿' }}
                             </div>
                             <div class="item_select" 
                                 @click="setSelections('subSelect',123)">
                                 {{ '查看参数' }}
                             </div>
                         </template>
                     </navBack>
                     <!-- 主体  -->
                     <div class="view_detail_content">
                         <!-- 视频 + 右侧信息 -->
                         <div class="view_content">
                             <!-- 视频+控制条 -->
                             <div class="video_box">
                                 <div class="video_box_content">
                                     <TemplateVideo :showControls="false"/>
                                 </div>
                                 <!-- 控制条 -->
                                 <div class="progress_bar">
                                     <div class="control_panel">
                                         <div style="display: flex; align-items: center;">
                                             <cu-icon style="font-size: 26px; margin-right: 10px;" type="icon-bofang3"></cu-icon>
                                             <span class="current_time">00:05</span>
                                         </div>
                                         <!-- 滑动进度条 -->
                                         <div style="width: 80%;">
                                             <a-slider id="test"  v-model:value="sliderVal" />
                                         </div>
                                         <div class="current_time">00:10</div>
                                     </div>
                                 </div>
                             </div>
             
                             <!-- 右侧视频文本信息 -->
                             <div class="video_information">
                                 <!-- 头部描述 -->
                                 <h1 class="video_information_title">
                                     片段1
                                 </h1>
                                 <div class="template_information">
                                     <!-- 添加素材 -->
                                     <div class="template_information_item">
                                         <h3 class="template_information_item_title"> 素材 </h3>
                                         <div class="template_information_item_content">
                                             <a-popover 
                                                 v-model:visible="popVisible"
                                                 placement="top"
                                                 trigger="click" 
                                                 :autoAdjustOverflow="false"
                                                 :getPopupContainer=" triggerNode => {
                                                     return triggerNode.closest('.template_information_item_content')
                                                 }">
                                                 <template #content>
                                                     <div class="propover_content">
                                                         <a-radio-group  v-model:value="radioGroupVal" name="radioGroup">
                                                             <a-radio value="1" style="padding: 0;">素材库导入</a-radio>
                                                             <a-radio value="2" style="padding: 0;" >本地上传</a-radio>
                                                         </a-radio-group>
                                                         <div class="btn_box">
                                                             <a-button class="cancel_btn">取消</a-button>
                                                             <a-button class="confirm_btn" type="primary" @click="uplodFile">确定</a-button>
                                                         </div>
                                                     </div>
                                                 </template>
                                         <a-button type="primary" >添加素材</a-button>
                                         </a-popover>
                                         </div>
                                     </div>
                                     <!-- 编辑文本 -->
                                     <div class="template_information_item">
                                         <h3 class="template_information_item_title"> 文本 </h3>
                                         <div class="template_information_item_content">
                                             <div class="edit_text_content">
                                                 <a-input v-model:value="state.textone" placeholder="">
                                                 <template #suffix>
                                                     <span class="input_suffix">推荐字数 {{state.textone.length}}/5</span>
                                                 </template>
                                                 </a-input>
                                                 <a-input v-model:value="state.texttwo" placeholder="">
                                                 <template #suffix>
                                                     <span class="input_suffix">推荐字数 {{state.texttwo.length}}/6</span>
                                                 </template>
                                                 </a-input>
                                             </div>
                                         </div>
                                     </div>
             
                                     <!-- 素材音量 -->
                                     <div class="template_information_item">
                                         <h3 class="template_information_item_title"> 素材音量 </h3>
                                         <div class="template_information_item_content">
                                             <div class="controls_void">
                                                 <cu-icon type="icon-yinliang01" style="cursor: pointer;" ></cu-icon>
                                                 <div style="flex: 1; padding-left: 3px;">
                                                     <a-slider id="test"  v-model:value="sliderVal" />
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
             
                         <!-- 底部操作面板 -->
                         <TemplateBottomControls  @batchOperation="batchOperation"/>
                     </div>
                 </div>
             </template>

            <!--
                批量操作
             -->
             <template v-else>
                <TemplateBatchOperation @changeIsShowtemplate="isShowtemplate = true"></TemplateBatchOperation>
             </template>
            
            
            <!-- 上传多个文件弹窗 -->
            <UploadFileModal :visible="visibleUploadFile" :type="'video'" :fileData="{}"
			@onCancel="visibleUploadFile = false" @onSubmit="onSubmitUploadFile" />
        <!-- 上传组件 -->
            <a-upload
            v-show="false" 
            v-model:file-list="fileList"
            list-type="picture"
            :max-count="1"
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            >
            <a-button  >
                <upload-outlined ></upload-outlined>
            </a-button>
        </a-upload>
    </div>
</template>
<style lang="less" scoped>
    .view_detail{
        width: 100%;
        height: 100%;
        .view_detail_use{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            .view_detail_content{
                height: 100%;
                width: 100%;
                display: flex;
                flex-direction: column;
    
                .view_content{
                    flex: 1;
                    display: flex;
                    .video_box{
                        flex: 1;
                        padding: 32px 32px 19px 32px;
                        background-color: #f4f5f5;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        .video_box_content{
                            height: 100%;
                             width: 90%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            margin-bottom: 17px;
                        }
                        // 进度条
                        .progress_bar{
                            padding:5px 10px;
                            border-radius: 8px;
                            width: 80%;
                            flex: 1;
                            background-color: #eaecec;
                            .control_panel{
                                display: flex;
                                justify-content: space-around;
                                align-items: center;
                                
                            }
                        }
                    }
    
                    // 右侧视频信息
                    .video_information{
                        width: 432px;
    
                        // 卡片标题
                        .video_information_title{
                            font-size: 20px;
                            font-weight: 600;
                            padding: 24px 32px;
                            border-bottom: 1px solid #ededee;
                        }
                        // 内容
                        .template_information_item{
                            padding: 24px 32px 16px;
                            h3{
                                font-weight: 600;
                            }
                            .template_information_item_content{
                                // 素材音量
                                .controls_void{
                                    padding: 0px 24px;
                                    background-color: #f4f5f5;
                                    border-radius: 8px;
                                    overflow: hidden;
                                    display: flex;
                                    align-items: center;
                                }
                                // 编辑文本
                                .edit_text_content{
                                    display: flex;
                                    flex-direction: column;
                                    gap: 10px;
                                    :deep(.ant-input-affix-wrapper){
                                        border: none;
                                        background-color: #f4f5f5 !important;
                                        border-radius: 5px;
                                        padding: 5px 15px;
                                        input{
                                            background-color: #f4f5f5 !important;
                                        }
                                    }
                                    .input_suffix{
                                        font-size: 12px;
                                        color: #6e7073;
                                    }
                                }
    
                            // 设置气泡框内部的radio 边距样式
                            :deep(.ant-radio-wrapper){
                                margin: 0;
                                .ant-radio-input{
                                    margin-right: 5px;
                                }
                            }
                            // 设置气泡框本地的边距
                            :deep(.ant-popover-inner-content){
                                padding: 24px;
                            }
                            :deep(.ant-popover-inner){
                                border-radius: 8px;
                            }
    
                            .propover_content{
    
                                // 气泡框内部的按钮
                                .btn_box{
                                    display: flex;
                                    justify-content: end;
                                    margin-top: 24px;
                                    gap:8px;
                                }
                            }
    
                            }
                        }
                    }
                }
    
            }
           
            .view_detail_btn{
                border-radius: 6px;
                 color: #474a4d;
                 font-size:14px;
                 font-weight: 600;
                 border-color:#f4f5f5 ;
                 background-color:#f4f5f5 ;
                 &:hover{
                     background-color: #eceded;
                 }
                 }
    
                 .item_select{
                    padding: 8px 16px;
                    max-width: 280px;
                    min-width: 130px;
                    text-align: center;
                    cursor: pointer;
                    &:hover{
                            background-color: #eceded;
                        }
                }
        }
        }
    
</style>